<template>
  <div class="container">
    <div class="approve-example-container">
      <div id="graph" class="viewport" />

      <template v-if="LF">
        <NodePanel :lf="LF"></NodePanel>
        <PropertyPanel v-if="Object.keys(nodeData).length > 0" :lf="LF" :curNodeData="nodeData"></PropertyPanel>
      </template>
    </div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, reactive, ref, toRaw } from 'vue'
import LogicFlow from '@logicflow/core'
import '@logicflow/core/dist/style/index.css'

import { Menu, Control, MiniMap, Group, DndPanel } from '@logicflow/extension'
import '@logicflow/extension/lib/style/index.css'

import { themeApprove, data } from './components/config'

import RegisteNode from './components/registerNode'
import NodePanel from './components/NodePanel.vue'
import PropertyPanel from './components/PropertyPanel.vue'

LogicFlow.use(Menu)
LogicFlow.use(Group)
LogicFlow.use(Control)
LogicFlow.use(MiniMap)
LogicFlow.use(DndPanel)

const LF = ref()
let nodeData = ref({})
console.log(
  'nodeData ref 常用于定义响应式复杂数据类型 proxy对象 初始化值存在于 target 中 直接取用即可'
)
console.log(nodeData)

const config = {
  stopScrollGraph: true,
  stopZoomGraph: true,
  grid: {
    size: 10,
    visible: true,
    type: 'mesh',
    config: {
      color: '#DCDCDC', // 设置网格的颜色
    },
  },
  keyboard: { enabled: true },
  style: themeApprove,
}

const initEvent = (lf: LogicFlow) => {
  lf.on('element:click', ({ data }) => {
    // console.log(JSON.stringify(lf.getGraphData()))
    console.log('element:click')
    console.log(data)
    setNodeData(data)
  })
  lf.on('connection:not-allowed', (data: any) => {
    console.error(data.msg)
    alert(data.msg)
  })
}

const setNodeData = (data: {}) => {
  nodeData.value = data
  console.log('setNodeData')
  console.log(nodeData)
}

onMounted(() => {
  const lf = new LogicFlow({
    ...config,
    container: document.querySelector('#graph') as HTMLElement,
  })

  RegisteNode(lf)

  lf.render({
    // nodes: [
    //   {
    //     type: 'my-group',
    //     x: 960,
    //     y: 150,
    //     children: ['rect_3'],
    //   },
    //   {
    //     id: 'rect_3',
    //     type: 'resizable-rect',
    //     x: 500,
    //     y: 400,
    //     properties: {
    //       nodeSize: {
    //         width: 160,
    //         height: 40,
    //       },
    //     },
    //   },
    // ],
  })

  initEvent(lf)
  LF.value = lf
})
</script>

<style>
.container {
  border: 1px rgb(230, 230, 230) solid;
  border-radius: 6px;
  padding: 0 10px 10px;
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  user-select: none;
}

.viewport {
  height: 100%;
  overflow: hidden;
  position: relative;
}

.import_icon {
  color: red;
}

.approve-example-container {
  position: relative;
  height: 100%;
  color: #000;
}

.node-panel {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 70px;
  padding: 20px 0px;
  background-color: white;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
  border-radius: 6px;
  text-align: center;
  z-index: 101;
}

.approve-node {
  display: inline-block;
  margin-bottom: 20px;
}

.node-label {
  font-size: 12px;
  margin-top: 5px;
}

.node-jugement .node-label {
  margin-top: 15px;
}

.property-panel {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  margin: 0;
  background-color: white;
  border-top-left-radius: 6px;
  border-top-right-radius: 6px;
  z-index: 101;
  box-shadow: 0 0 10px 1px rgb(228, 224, 219);
}

.property-panel-footer {
  width: 100%;
  text-align: center;
}

.property-panel-footer .property-panel-footer-hide {
  width: 200px;
}

.approve-example-container .lf-control {
  position: fixed;
  top: 10px;
  width: 275px;
  box-shadow: 0 0 10px #888888;
}

.form-property {
  width: 30%;
}

.hover-panel {
  position: fixed;
}

.node-shape:hover {
  cursor: move;
}
</style>
